<template>
	<view class="background">
		<view class="bgSet"></view>
		<view class="top">
				<view class="title">个人信息</view>
			</view>
			<view class="section">
				<view class="list">
					<view class="row" @click="showInputDialog">
						<view class="left">
							<uni-icons type="auth-filled" size="25" color="#1296db"></uni-icons>
							<view class="text">更改用户名</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="20" color="#1296db"></uni-icons>
						</view>
					</view>
<!-- 					<view class="row" @click="showAvatorDialog">
						<view class="left">
							<uni-icons type="person-filled" size="25" color="#1296db"></uni-icons>
							<view class="text">更换头像</view>
						</view>
						<view class="right">
							<navigator url="/pages/setPersonalMes/setPersonalMes">
							<uni-icons type="right" size="20" color="#1296db"></uni-icons>
							</navigator>
						</view>
					</view> -->
					<view class="row" @click="showPasswordDialog">
						<view class="left">
							<uni-icons type="locked-filled" size="25" color="#1296db"></uni-icons>
							<view class="text">更改密码</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="20" color="#1296db"></uni-icons>
						</view>
					</view>
					<!-- <view class="row" @click="showAddressDialog">
						<view class="left">
							<uni-icons type="home-filled" size="25" color="#1296db"></uni-icons>
							<view class="text">更改地址</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="20" color="#1296db"></uni-icons>
						</view>
					</view> -->
					<view class="row" @click="showSexDialog">
						<view class="left">
							<uni-icons type="contact-filled" size="25" color="#1296db"></uni-icons>
							<view class="text">更改性别</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="20" color="#1296db"></uni-icons>
						</view>
					</view>
					<view class="row" @click="showBirthDialog">
						<view class="left">
							<uni-icons type="star-filled" size="25" color="#1296db"></uni-icons>
							<view class="text">更改生日</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="20" color="#1296db"></uni-icons>
						</view>
					</view>
					<view class="row" @click="showMailDialog">
						<view class="left">
							<uni-icons type="email-filled" size="25" color="#1296db"></uni-icons>
							<view class="text">更改邮箱</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="20" color="#1296db"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog" animation="false">
				<uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" value="对话框预置提示内容!"
					v-model="value1" @input="onInput" @confirm="dialogInputConfirm" @close ="dialogInputCancel"></uni-popup-dialog>
				</uni-popup>
			</view>
			<view>
			<!-- 输入框示例 -->
	<!-- 		<uni-popup ref="inputDialogAvator" type="dialog" animation="false">
				<uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" value="对话框预置提示内容!"
					v-model="value2" @input="onInput" @confirm="dialogAvatorConfirm" @close ="dialogAvatorCancel"></uni-popup-dialog>
				</uni-popup> -->
			</view>
			<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialogPassword" type="dialog" animation="false">
				<uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" value="对话框预置提示内容!"
					v-model="value3" @input="onInput" @confirm="dialogPasswordConfirm" @close ="dialogPasswordCancel"></uni-popup-dialog>
				</uni-popup>
			</view>
			<view>
			<!-- 输入框示例 -->
			<!-- <uni-popup ref="inputDialogAddress" type="dialog" animation="false">
				<uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" value="对话框预置提示内容!"
					v-model="value4" @input="onInput" @confirm="dialogAddressConfirm" @close ="dialogAddressCancel"></uni-popup-dialog>
				</uni-popup> -->
			</view>
			<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialogSex" type="dialog" animation="false">
				<uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" value="对话框预置提示内容!"
					v-model="value5" @input="onInput" @confirm="dialogSexConfirm" @close ="dialogSexCancel"></uni-popup-dialog>
				</uni-popup>
			</view>
			<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialogMail" type="dialog" animation="false">
				<uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" value="对话框预置提示内容!"
					v-model="value6" @input="onInput" @confirm="dialogMailConfirm" @close ="dialogMailCancel"></uni-popup-dialog>
				</uni-popup>
			</view>
			<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialogBirth" type="dialog" animation="false">
				<view class="picker-container">
					<picker mode="date" :value="selectedDate" start="2000-01-01" end="2030-12-31" @change="handleDateChange">
					  <view class="picker-label">{{ selectedDate }}</view>
					</picker>
				</view>

				<!-- <uni-popup-date ref="inputClose"  mode="input" title="输入内容" value="对话框预置提示内容!"
					v-model="value" @input="onInput" @confirm="dialogInputConfirm" @close ="dialogInputCancel"></uni-popup-date> -->
				</uni-popup>
			</view>
			<button type="primary" class="button" @click="onClick">
				返回
			</button>
		<!-- 	<button type="primary" class="button" @click="">
				测试
			</button> -->
	</view>
	
</template>

<script setup>
import { ref } from 'vue';
	import {
		baseUrl
	} from '../../tool/tool';
const app = getApp();
const value1 = ref();//昵称
const value3 = ref();//密码
const value4 = ref();//地址
const value5 = ref();//性别
const value6 = ref();//邮箱

// 通过 ref 获取 uni-popup 组件的引用
const inputDialog = ref(null);
const inputDialogBirth = ref(null);
const inputDialogAvator = ref(null);
const inputDialogPassword = ref(null);
const inputDialogAddress = ref(null);
const inputDialogSex = ref(null);
const inputDialogMail = ref(null);
const selectedDate = ref('2023-01-01');

const handleDateChange = (e) => {
  selectedDate.value = e.detail.value;
  uni.request({
  	url: baseUrl + "/UserAccount/changeUserBirthday?account="+app.globalData.account+"&birthday="+selectedDate.value,
  	method: "POST",
  	success(res) {
  		if (res.data) {
  			console.log("success");
  		} else {
  			console.log("faild");
  		}
  	}
  })
  console.log(selectedDate.value);
};
function onInput(){
	value.value=value;
}

function showInputDialog() {
  if (inputDialog.value) {
    inputDialog.value.open();
  }
}
function showAvatorDialog(){
	if(inputDialogAvator.value){
		inputDialogAvator.value.open();
	}
}
function showPasswordDialog(){
	if(inputDialogPassword.value){
		inputDialogPassword.value.open();
	}
}
function showSexDialog(){
	if(inputDialogSex.value){
		inputDialogSex.value.open();
	}
}
function showAddressDialog(){
	if(inputDialogAddress.value){
		inputDialogAddress.value.open();
	}
}
function showMailDialog(){
	if(inputDialogMail.value){
		inputDialogMail.value.open();
	}
}

function dialogInputConfirm() {
  if (value1.value) {
    console.log('用户确认输入：', value1.value);
    // 处理用户输入的逻辑
	uni.request({
		url: baseUrl + "/UserAccount/changeUsername?account="+app.globalData.account+"&username="+value1.value,
		method: "POST",
		success(res) {
			if (res.data) {
				console.log("success");
			} else {
				console.log("faild");
			}
		}
	})
  } else {
    console.log('未获取到有效输入');
  }
}

function dialogInputCancel() {
  console.log('用户取消输入');
}
function dialogPasswordConfirm() {
  if (value3.value) {
    console.log('用户确认输入：', value3.value);
    // 处理用户输入的逻辑
	uni.request({
		url: baseUrl + "/UserAccount/changeUserPassword?account="+app.globalData.account+"&password="+value3.value,
		method: "POST",
		success(res) {
			if (res.data) {
				console.log("success");
			} else {
				console.log("faild");
			}
		}
	})
  } else {
    console.log('未获取到有效输入');
  }
}

function dialogPasswordCancel() {
  console.log('用户取消输入');
}
function dialogAddressConfirm() {
  if (value4.value) {
    console.log('用户确认输入：', value4.value);
    // 处理用户输入的逻辑
  } else {
    console.log('未获取到有效输入');
  }
}

function dialogAddressCancel() {
  console.log('用户取消输入');
}
function dialogSexConfirm() {
  if (value5.value) {
    console.log('用户确认输入：', value5.value);
    // 处理用户输入的逻辑
	uni.request({
		url: baseUrl + "/UserAccount/changeUserSex?account="+app.globalData.account+"&sex="+value5.value,
		method: "POST",
		success(res) {
			if (res.data) {
				console.log("success");
			} else {
				console.log("faild");
			}
		}
	})
  } else {
    console.log('未获取到有效输入');
  }
}

function dialogSexCancel() {
  console.log('用户取消输入');
}
function dialogMailConfirm() {
  if (value6.value) {
    console.log('用户确认输入：', value6.value);
    // 处理用户输入的逻辑
	uni.request({
		url: baseUrl + "/UserAccount/changeUserEmail?account="+app.globalData.account+"&email="+value6.value,
		method: "POST",
		success(res) {
			if (res.data) {
				console.log("success");
			} else {
				console.log("faild");
			}
		}
	})
  } else {
    console.log('未获取到有效输入');
  }
}

function dialogMailCancel() {
  console.log('用户取消输入');
}
function showBirthDialog() {
	if(inputDialogBirth.value){
		inputDialogBirth.value.open();
	}
}

function onClick() {
  uni.switchTab({
    url: "/pages/mine/mine"
  });
}
</script>

<style lang="scss" scoped>
	.bgSet{
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: linear-gradient( #BBE5FD 0%, #D2DAFD 49%, #fff 100%);
			z-index: -1;
		}

	.top {
	    display: flex;
	    justify-content: center; /* Center horizontally */
	    align-items: center; /* Center vertically */
	    height: 100px; /* Adjust height if needed */
/* 	    background-color: #f0f0f0; /* Example background color */ 
		.title {
		  font-size: 24px; /* Adjust font size */
		  color: #333; /* Adjust text color */
		}
	  }
	  
	  
.section{
		width: 690rpx;
		margin: 50rpx auto;
		border: 1rpx solid #eee;
		border-radius: 14rpx;
		box-shadow: 0 0 35rpx rgba(0,0,0,0.1);
		.list{
			.row{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				height: 100rpx;
				border-bottom: 1rpx solid #eee;
				.left{
					display: flex;
					align-items: center;
					.text{
						padding-left: 20rpx;
						color: #777;;
					}
				}
				.right{
					display: flex;
					align-items: center;
				}
			}
		}
	}
	.picker-container {
	  background-color: #fff; /* Set background color for picker */
	  padding: 20rpx; /* Adjust padding */
	  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* Add shadow for better appearance */
	  border-radius: 8rpx; /* Add border radius */
	}

	.button{
		width: 50%;
/* 		display: flex; */
		justify-content: space-between;
		align-items: center;
	}
	.button .text {
		display: flex;
		justify-content: center; /* 文本水平居中 */
		align-items: center; /* 文本垂直居中 */
		}
</style>
